import './style.css'
import App from './App.vue'
import routes from './router'
import { initMessage } from './utils/message'
import { ViteSSG } from 'vite-ssg'
import NProgress from 'nprogress'
const title = '空指针的夜晚'


// const app = createApp(App)
// // 1. 管理 Head 标签
// const head = createHead()
// app.use(head)
// // 3. 注册全局组件/插件
// initMessage()
// app.use(router)
// app.component('QuillEditor', QuillEditor)
// app.mount('#app')

const createOverlay = () => {
  const overlay = document.createElement('div')
  overlay.id = 'page-loading-overlay'
  overlay.style.cssText = `
    position: fixed;
    top: 5rem;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9998;
    display: none;
    
    display: flex;
    justify-content: center;
    align-items: center;
  `;

  // 创建加载圈元素
  const spinner = document.createElement('div');
  spinner.style.cssText = `
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #333;
    border-radius: 50%;
    margin: 0 auto;
    margin-top:5rem;
    animation: spin 1s linear infinite;
  `;

  // 添加旋转动画
  const style = document.createElement('style');
  style.textContent = `
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  `;
  document.head.appendChild(style);

  // 将加载圈添加到 overlay
  overlay.appendChild(spinner);
  document.body.appendChild(overlay)
}

export const createApp = ViteSSG(
    App,
    {routes},
    ({ app, router, routes, isClient, initialState }) => {
        createOverlay()
        //动态设置标题（SSR/SSG 兼容）
        NProgress.configure({ showSpinner: false })
        router.beforeEach((to, from, next) => {
            document.getElementById('page-loading-overlay').style.display = 'block'
            NProgress.start()
            next()
        })
        router.afterEach((to) => {
            setTimeout(() => {
                NProgress.done()
                document.getElementById('page-loading-overlay').style.display = 'none'  
            }, 400);
            document.title = to.meta.title || title
        })

        initMessage()
        app.use(router)
    }
)